<template>
  <div v-if="props.showValue" class="c-input-wrapper">
    <el-popover
      placement="top-start"
      title="上手值"
      effect="dark"
      :width="200"
      trigger="hover"
      :disabled="!showOldValue"
      :content="oldValue ? oldValue : '无'"
    >
      <template #reference>
        <el-input
          v-model="inputValue"
          :placeholder="placeholder"
          :disabled="disabled || isLoading"
          :clearable="clearable"
          :prefix-icon="prefixIcon"
          :suffix-icon="suffixIcon"
          :show-word-limit="showWordLimit"
          :maxlength="maxlength"
          :type="type"
          :class="{ 'show-red': props.oldValue != inputValue && showOldValue }"
          v-bind="$attrs"
          @input="handleInput"
          @change="handleChange"
          @clear="handleClear"
          @focus="handleFocus"
          @blur="handleBlur"
        >
          <template v-if="prependIcon" #prepend>
            <i :class="prependIcon"></i>
          </template>
          <template v-if="appendIcon" #append>
            <i :class="appendIcon"></i>
          </template>
        </el-input>
      </template>
    </el-popover>
    <div v-if="showRequiredMark && !hideRequiredMark" class="required-mark">*</div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElInput } from 'element-plus'

/**
 * Input 二次封装，增强了以下功能：
 * 1. 加载状态管理
 * 2. 可配置的required标记
 * 3. 统一的事件处理
 * 4. 显示上手值
 * 5. 是否变红逻辑
 * 6. 额外的图标配置选项
 */
const props = defineProps({
  // 绑定值
  modelValue: {
    type: [String, Number],
    default: '',
  },
  // 占位符
  placeholder: {
    type: String,
    default: '',
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false,
  },
  // 是否可清空
  clearable: {
    type: Boolean,
    default: false,
  },
  // 是否显示加载状态
  loading: {
    type: Boolean,
    default: false,
  },
  // 输入框类型
  type: {
    type: String,
    default: 'text',
  },
  // 是否显示字数统计
  showWordLimit: {
    type: Boolean,
    default: false,
  },
  // 最大输入长度
  maxlength: {
    type: Number,
  },
  // 前缀图标
  prefixIcon: {
    type: String,
  },
  // 后缀图标
  suffixIcon: {
    type: String,
  },
  // 输入框头部图标
  prependIcon: {
    type: String,
  },
  // 输入框尾部图标
  appendIcon: {
    type: String,
  },
  // 是否显示必填标记
  showRequiredMark: {
    type: Boolean,
    default: false,
  },
  // 是否隐藏必填标记（优先级高于showRequiredMark）
  hideRequiredMark: {
    type: Boolean,
    default: false,
  },
  // 是否显示
  showValue: {
    type: Boolean,
    default: true,
  },
  // 是否显示上手值
  showOldValue: {
    type: Boolean,
    default: false,
  },
  // 上手值
  oldValue: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['update:modelValue', 'input', 'change', 'clear', 'focus', 'blur'])

// 内部输入值
const inputValue = ref(props.modelValue)
// 内部加载状态
const isLoading = ref(props.loading)

// 监听modelValue变化
watch(
  () => props.modelValue,
  (newVal) => {
    inputValue.value = newVal
  },
)

// 监听外部loading状态变化
watch(
  () => props.loading,
  (newVal) => {
    isLoading.value = newVal
  },
)

// 处理输入事件
const handleInput = (value: string | number) => {
  inputValue.value = value
  emit('update:modelValue', value)
  emit('input', value)
}

// 处理值变化事件
const handleChange = (value: string | number) => {
  inputValue.value = value
  emit('update:modelValue', value)
  emit('change', value)
}

// 处理清除事件
const handleClear = () => {
  inputValue.value = ''
  emit('update:modelValue', '')
  emit('clear')
}

// 处理聚焦事件
const handleFocus = (event: FocusEvent) => {
  emit('focus', event)
}

// 处理失焦事件
const handleBlur = (event: FocusEvent) => {
  emit('blur', event)
}
</script>

<style lang="scss" scoped>
.c-input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.required-mark {
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  color: #f56c6c;
  font-size: 14px;
}

/* 输入值与上手值不同时的变红样式 */
:deep(.show-red) .el-input__inner {
  color: red;
}
</style>
